<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      right-text="删除"
      class="bg-primary color-white"
      @click-left="goback"
      @click-right="clickDelete"
    />
    <div class="has-top has-bottom">
      <div class="bg-box bg-primary" />
      <van-form ref="detailForm">
        <!-- 详情 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle  left-star">商品详情</h3>
          <div class=" mt-15">
            <div class="prductItem-detail ">
              <p class="color-gray mb-10 ml-15">商品名称</p>
              <van-field
                v-model="productDetail.ProductName"
                class="pos-a bottom-0"
                name="商品名称"
                label=""
                placeholder="请输入商品名称"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
          </div>
          <div class="mt-35 product-price-box">
            <div class="flex-1 ">
              <p class="color-gray ml-15 mb-10">单位</p>
              <van-field

                v-model="productDetail.Unit"

                name="单位"
                label=""
                placeholder="请输入商品单位"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
						<div class="flex-fe-c mt-35">
							<van-checkbox v-model="productDetail.IsSale" checked-color="#2cd334" slot="right-icon" icon-size="18" shape="square">是否开启促销价</van-checkbox>
            </div>
						<div class="flex-s-s mt-15">
              <div class="flex-item">
                <p class="color-gray ml-15 mb-10">{{ productDetail.IsSale?'促销价':'价格'}}</p>
                <van-field
									class="css-pricefield"
                  v-model="productDetail.ProductPrice"
                  name="价格"
                  label=""
                  placeholder="请输入"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
              <!--<div class="flex-item">
                <p class="color-gray ml-15 mb-10">促销价</p>
                <van-field
								  class="css-pricefield"
                  v-model="productDetail.ProductPrice"
                  name="促销价"
                  label=""
                  placeholder="请输入"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>-->
              <div class="flex-item">
                <p class="color-gray ml-15 mb-10">市场价</p>
                <van-field
								  class="css-pricefield"
                  v-model="productDetail.MarketPrice"

                  name="市场价"
                  label=""
                  placeholder="请输入"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
            </div>
          </div>
        </div>
				<!-- 库存 -->
				<div v-show="!pageData.sku" class="br-12 mg-25 pd-25 bg-white product-stock">
          <h3 class="item-tle">库存</h3>
          <div class="mt-15">
            <van-field
              v-model="productDetail.Stock"
							label-width="60"
              name="库存"
              label="库存数"
              placeholder="库存"
							:rules="[{ required: true, message: ' ' }]"
            />
          </div>
        </div>
        <!-- 分类 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">选择分类</h3>
          <div class="flex mt-15">
            <ul class="classifyList flex">
              <li v-for="(item,index) in classifyList" :key="index" class="classifyItem flex-s-0 "
							 :class="activeIndex ===index?'activeClassify':''" @click="changeClassify(index)">
                <p>{{ item.Name }}</p>
              </li>
              <!--<li v-for="(item,index) in classifyList" :key="index" class="classifyItem flex-s-0 " :class="index === activeIndex ? 'activeClassify' : ''" @click="changeClassify(index)">
                <p>{{ item.Name }}</p>
              </li>-->
              <li class="classifyItem flex-s-0 openClassifyList" @click="openClassifyList">
                <p><svg-icon icon-class="add" class="fs-30 add" />添加分类</p>
              </li>
            </ul>
          </div>
          <p v-show="activeIndex<0" class="color-danger fs-20">请选择分类</p>
        </div>

        <!-- 规格 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">商品规格 <span class="arrow color-gray-light" @click="changeSpec">修改(无则不填写)</span></h3>
        </div>
				<div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">价格与库存 <span class="arrow color-gray-light" @click="changePrice">多规格设置(无规格不填写)</span></h3>
        </div>
        <!-- 图片 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">商品图片</h3>
          <div class="mt-15">
            <draggable v-model="pageData.imgList" :options="options" class="flex flex-wrap" @end="end">
              <div v-for="(item,index) in pageData.imgList" :key="index" class="productImgItem">
                <img class="drag-item" :src="item">
                <div class="img-close-box" @click="deleteImg(index)">
                  <span class="img-close" />
                </div>
              </div>
              <div class="add-img productImgItem ">
                <van-uploader ref="imgUpload" :after-read="afterRead" />
              </div>
            </draggable>
          </div>
          <p v-show="pageData.imgList.length<1" class="color-danger fs-20">请上传商品图片</p>
        </div>

        <!-- 商品描述 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">商品描述</h3>
          <div class="mt-15 pos-r textarea-box">
            <van-field
              v-model="productDetail.ShortDescription"
              rows="2"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请对商品进行描述..."
              show-word-limit
            />
          </div>
        </div>

        <!-- 必选商品 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">必选商品</h3>
          <div class="mt-15">
            <p class="checkbox" :class="productDetail.IsMustBuy===1?'checked':''" @click="toggleMust">设置必选商品，在推荐分类中显示</p>
          </div>
        </div>

        <!-- 推荐商品 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle">推荐商品</h3>
          <div class="mt-15">
            <p class="checkbox" :class="productDetail.IsRecommend===1?'checked':''" @click="toggle">设置推荐商品，在推荐分类中显示</p>
          </div>
        </div>
       
      </van-form>
    </div>

    <div class="nav-bottom fixed-bottom">
      <div class="btn-box flex-s-c">
        <button class="btn-middle bg-primary color-white" @click="updateStatu">{{ productDetail.ProductStatus===1?"下架":"上架" }}</button>
        <button class="btn-middle bg-second color-white" @click="save">保存</button>
      </div>
    </div>

    <!-- 分类弹出层 -->
    <van-popup v-model="showClassifyList" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <productClassifyEdit :classify-list="classifyList" @closeClassifyList="closeClassifyList" />
    </van-popup>

    <!-- 规格编辑弹出层 -->
    <van-popup v-model="showSpec" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <van-nav-bar
        fixed
        title="规格编辑"
        left-arrow
        @click-left="closeSpec"
      />
      <van-form ref="skuForm">
        <div class="has-top mt-25">
					<div v-for="(item,index) in pageData.ProductAttributesList" :key="index">
						<div class="mb-25 pd-25 bg-white">
							<div class="specs">
								<van-field 
									v-model="item.AttributeName"
									placeholder="请输入规格"
									label="规格：" 
									:rules="[{ required: true, message: ' ' }]"
									@blur="onBlur"
								/>
								<div class="specdelete" @click="showDeldeteSpec(index)"><img src="../../assets/images/specDelete.png" /></div>
							</div>
							<div>
								<div class="mt-12 mb-28">已选规格值</div>
								<div class="specList" >
									<div v-for="(items,indexs) in item.Values" :key="indexs" v-if="item.Values.length > 0" class="spec">
										<div class="specValue" v-if="items.ValueStr !== ''">{{ items.ValueStr }} </div>
										<svg-icon icon-class="delete" class="fs-30 delete" v-if="items.ValueStr !== ''" @goPage="deleteSpecItem(index,indexs)"/>
									</div>
									<div class="addSpecValue"><svg-icon icon-class="add" class="fs-24 add" @goPage="addSpecShow(index)"/>添加</div>
								</div>
							</div>
						</div>
					</div>
					<div class="addSpec" @click="addSpec"><svg-icon icon-class="add" class="fs-32 add mr-24" @goPage="addSpec"/>新增规格</div>
        </div>
				<div class="nav-bottom fixed-bottom">
					<div class="btn-box flex-s-c">
						<button class="btn-middle bg-primary color-white" @click="saveSpec">保存</button>
					</div>
				</div>
      </van-form>
    </van-popup>
		<!-- 新增规格值 -->
		<van-dialog v-model="showAddSpec" :show-cancel-button="showBtn" :show-confirm-button="showBtn" @confirm="addSpecValue" class="dialog pt-60 br-16">
			<h3 class="fs-34 tac fw-b mb-48">请输入规格值</h3>
			<div class="mt-15 pos-r plr-48">
				<van-field
					v-model="specName"
					class="bg-f7 br-12 mb-48"
					name="规格名称"
					label=""
					placeholder="请输入规格"
					:rules="[{ required: true, message: ' ' }]"
					@blur="onBlur"
				/>
			</div>
		</van-dialog>
		<!-- 价格与库存设置弹窗 -->
		<van-popup v-model="showPrice" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <van-nav-bar
        fixed
        title="价格与库存"
        left-arrow
				right-text="批量设置"
        @click-left="closePrice"
				@click-right="batchSetting"
      />
      <van-form ref="skuPriceForm">
        <div class="has-top mt-25" v-if="pageData.ProductAttributesList.length > 0">
					<li v-for="(item,index) in oldProductSkuList" :key="index" class="bg-white mb-24 pd-24">
						<div class="fs-32">{{ item.Name }}</div>
						<div class="flex-s-s mt-15 bg-f5">
              <div class="flex-item mr-76">
                <p class="color-gray ml-15 mb-16">售价</p>
                <van-field
									class="css-pricefield"
                  v-model="item.SalePrice"
                  name="售价"
                  label=""
                  placeholder="请输入"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
              <div class="flex-item">
                <p class="color-gray ml-15 mb-16">库存</p>
                <van-field
								  class="css-pricefield"
                  v-model="item.Stock"
                  name="库存"
                  label=""
                  placeholder="请输入"
                  :rules="[{ required: true, message: ' ' }]"
                />
              </div>
            </div>
					</li>
        </div>
      </van-form>
			<div class="nav_bottom">
				<button class="bg-primary color-white savePrice" @click="savePrice">保存</button>
			</div>
    </van-popup>
		<!-- 批量设置价格库存 -->
		<van-dialog v-model="showAddPrice" :show-cancel-button="showBtn" :show-confirm-button="showBtn" @confirm="saveSpecPrice" class="dialog pt-60 br-16">
			<h3 class="fs-34 tac fw-b mb-48">批量设置价格</h3>
			<div class="mt-15 pos-r plr-48 flex flex-s-c mb-48">
				<div class="w-110">售价</div>
				<van-field
					v-model="specPrice"
					class="bg-f7 br-12"
					name="售价"
					type="number"
					placeholder="请输入售价"
					:rules="[{ required: true, message: ' ' }]"
					@blur="onBlur"
				/>
			</div>
			<div class="mt-15 pos-r plr-48 flex flex-s-c mb-48">
				<div class="w-110">库存</div>
				<van-field
					v-model="specStock"
					class="bg-f7 br-12"
					name="库存"
					type="digit"
					placeholder="请输入库存"
					:rules="[{ required: true, message: ' ' }]"
					@blur="onBlur"
				/>
			</div>
		</van-dialog>
    <!-- 删除商品提示弹窗 -->
    <van-dialog v-model="showDeldeteProductDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">确定要删除此商品？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="showDeldeteProductDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteProduct">确定</button>
      </div>
    </van-dialog>

    <!-- 删除规格提示弹窗 -->
    <van-dialog v-model="showDeldeteSpecDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">确定删除规格？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="showDeldeteSpecDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteSpec">确定</button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import imgBox from 'components/imgBox'
import productClassifyEdit from 'views/viewComponents/productClassifyEdit'
import { upLoad } from 'api/upload'
import { GetStoreProductCategoryList, GetStoreProductDetail, DeleteStoreProduct, EditStoreProduct, UpdateStoreProductStatu } from 'api/store'
export default {
  components: {
    draggable,
    imgBox,
    productClassifyEdit
  },
  data() {
    return {
      // 初始数据
      title: '商品编辑',
      rightText: '排序',
      activeIndex: -1,
      pageData: {
        logo: '',
        sku: '',
        imgList: [],
				ProductAttributesList:[
					{
						AttributeName: '',
						Values: []
					},
				]
      },
			productSkuList: [],
			oldProductSkuList: [],
      showClassifyList: false,
      showSpec: false,
      showDeldeteProductDialog: false,
      showDeldeteSpecDialog: false,
      noshow: false,
      options: {
        // delay: 100,
        group: 'product',
        delayOnTouchOnly: true,
        animation: 150,
        handle: '.drag-item'
      },

      // 接口返回数据
      classifyList: ['推荐', '分类1', '智能家居', '分类1', '潮流服饰'],
      productDetail: {
        ImageUrl: ['', '', '', '', '', '', '', ''],
        ShortDescription: '',
        IsRecommend: 0,
        Unit: ''
      },
			selected: [],//分类选中的数据
			specName: '',
			showAddSpec: false,
			addIndex: 0, //判断规格值加在哪个下标的规格里
			showBtn: true, //添加规格值按钮显示
			showPrice: false, //价格与库存弹窗
			showAddPrice: false, //批量设置价格弹窗
			specStock: '',
			specPrice: '',
    }
  },
  created() {
    if (this.$route.params.params !== 'undefined') {
      const _params = JSON.parse(this.$route.params.params)
      if (typeof (_params) === 'number') {
        this.GetStoreProductDetail(_params)
      } else if (typeof (_params) === 'object') {
        this.productDetail = _params
        this.GetStoreProductCategoryList()
      }
    }
  },
  mounted() {
  },
  methods: {
    // 返回
    goback() {
      // 先判断是否为新商品，然后再判断数据是否变化
      this.$utils.back(this.$route.path)
    },
		clickDelete(){
			if(this.productDetail.ID !== 0){
				this.showDeldeteProductDialog = true
			}
		},
    // 删除商品
    deleteProduct() {
      // 判断是否为新增产品
      if (this.productDetail.ID === 0) {
        this.$utils.back(this.$route.path)
      } else {
        this.DeleteStoreProduct(this.productDetail.ID)
      }
    },
    // 切换头像
    changeImg() {
      this.$toast('商品主图为下方商品图片第一张，如需修改请修改商品图片')
    },
    // 多选点击选择分类
    //changeClassify(item,index) {
		//		// this.selected.indexOf(item) 判断item下标是否为-1，
		//		// 是-1则数组中匹配不到该数据，添加
		//		// 不是-1则说明匹配到了，抹除
		//		if (this.selected.indexOf(item) !== -1) {
    //      this.selected.splice(this.selected.indexOf(item), 1); //取消
    //    } else {
    //      this.selected.push(item);//选中添加到数组里
    //    }
		//		console.log('selected',this.selected)
    //    console.log(JSON.parse(JSON.stringify(this.selected)));
    //},
    //之前单选点击选择分类
    changeClassify(index) {
      this.activeIndex = index
      this.productDetail.ProductCategoryId = this.classifyList[index].ID
    },
		
    // 打开分类窗口
    openClassifyList() {
      this.showClassifyList = true
    },
    // 关闭分类窗口
    closeClassifyList(val) {
      console.log(val)
      if (val) {
        this.GetStoreProductCategoryList()
      }
      this.showClassifyList = false
    },
		//多规格设置价格与库存
		//changePrice(){
		//	this.productSkuList = [] 
		//	if(this.productSkuList.length === 0){
		//		this.productSkuList = this.combineAttributes('', this.pageData.ProductAttributesList);
		//	}
		//	var list = []
		//	console.log(this.productSkuList,"11111")
		//	if(this.productSkuList.length > 0 && this.productSkuList[0] !== '' && !this.productSkuList[0].Name){
		//		this.productSkuList.forEach((ele) => {
		//			var obj = {}
		//			obj.SalePrice = ''
		//			obj.Stock = '',
		//			obj.Name = ele
		//			const n = ele.split(',')
		//			obj.AttributeNameValue = ''
		//			for(var i = 0; i < this.pageData.ProductAttributesList.length; i++){
		//				if(obj.AttributeNameValue !== ''){
		//					obj.AttributeNameValue = obj.AttributeNameValue + ';' + this.pageData.ProductAttributesList[i].AttributeName + '_' + n[i]
		//				}else{
		//					obj.AttributeNameValue = this.pageData.ProductAttributesList[i].AttributeName + '_' + n[i]							
		//				}
		//			}
		//			list.push(obj)
		//		})
		//		this.productSkuList = list
		//	}
		//	
		//	if(this.productSkuList.length === 0 || this.productSkuList[0] === ''){
		//		return
		//	}
		//	this.oldProductSkuList = []
		//	this.showPrice = true
		//	this.oldProductSkuList = JSON.parse(JSON.stringify(this.productSkuList))
		//},
		changePrice(){
			this.productSkuList = []
			console.log(this.pageData.ProductAttributesList,"fna")
			if(this.productSkuList.length === 0){
						this.productSkuList = this.combineAttributes('', this.pageData.ProductAttributesList);
			}
			var list = []
			if(this.productSkuList.length > 0 && this.productSkuList[0] !== ''){
				if(this.oldProductSkuList.length > 0 ){
					for(var i = 0; i < this.oldProductSkuList.length; i++){
						for(var n = 0; n < this.productSkuList.length; n++){
							var obj = {}
							console.log(this.oldProductSkuList,i,"旧没有")
							console.log(this.oldProductSkuList[i].Name,this.productSkuList[n],"=======")
							if(this.oldProductSkuList[i].Name === this.productSkuList[n]){
								obj.SalePrice = this.oldProductSkuList[i].SalePrice
								obj.Stock = this.oldProductSkuList[i].Stock,
								obj.Name = this.oldProductSkuList[i].Name
								obj.AttributeNameValue = this.oldProductSkuList[i].AttributeNameValue
							}else{
								obj.SalePrice = ''
								obj.Stock = '',
								obj.Name = this.productSkuList[n]
								const m = this.productSkuList[n].split(',')
								obj.AttributeNameValue = ''
								for(var t = 0; t < this.pageData.ProductAttributesList.length; t++){
									if(obj.AttributeNameValue !== ''){
										obj.AttributeNameValue = obj.AttributeNameValue + ';' + this.pageData.ProductAttributesList[t].AttributeName + '_' + m[t]
									}else{
										obj.AttributeNameValue = this.pageData.ProductAttributesList[i].AttributeName + '_' + m[t]
									}
								}
							}
							list.push(obj)
						}
					}
				}else{
					console.log("第一次进来")
					this.productSkuList.forEach((ele) => {
						var obj = {}
						obj.SalePrice = ''
						obj.Stock = '',
						obj.Name = ele
						const n = ele.split(',')
						obj.AttributeNameValue = ''
						for(var i = 0; i < this.pageData.ProductAttributesList.length; i++){
							if(obj.AttributeNameValue !== ''){
								obj.AttributeNameValue = obj.AttributeNameValue + ';' + this.pageData.ProductAttributesList[i].AttributeName + '_' + n[i]
							}else{
								obj.AttributeNameValue = this.pageData.ProductAttributesList[i].AttributeName + '_' + n[i]							
							}
						}
						list.push(obj)
					})
				}
				this.productSkuList = list
			}
			console.log(this.productSkuList,"值呢")
			if(this.productSkuList.length === 0 || this.productSkuList[0] === ''){
				return
			}
			
			this.oldProductSkuList = []
			this.showPrice = true
			this.oldProductSkuList = JSON.parse(JSON.stringify(this.productSkuList))
		},
		combineAttributes(current, attributes) {
      var results = [];
      if (attributes.length == 0) {
        results.push(current);
      } else {
        var attribute = attributes[0];
        var values = attribute.Values;
        for (var i = 0; i < values.length; i++) {
					if( values[i].ValueStr !== ''){
						var value = values[i].ValueStr;
						var next = current + value + ',';
						var name = attribute.AttributeName + '_' +values[i].ValueStr;
						var remaining = attributes.slice(1);					
						var subResults = this.combineAttributes(next, remaining);
						results = results.concat(subResults);
					}
        }
      }
      return results;
    },
		closePrice(){
			this.showPrice = false
		},
		//批量设置价格库存弹窗
		batchSetting(){
			this.showAddPrice = true
		},
		//批量设置价格
		saveSpecPrice(){
			if(this.specPrice !== ''){
				this.oldProductSkuList.forEach((ele) => {
					ele.SalePrice = this.specPrice
				})
			}
			if(this.specStock !== ''){
				this.oldProductSkuList.forEach((ele) => {
					ele.Stock = this.specStock
				})
			}
		},
		//保存批量设置
		savePrice(){
			this.productSkuList =  this.oldProductSkuList
			this.showPrice = false
		},
	
		//添加规格弹窗显示
		addSpecShow(index){
			this.showAddSpec = true
			this.addIndex = index  //用下标来判断添加在哪里
		},
		//添加规格值
		addSpecValue(){
			if(this.specName.trim() !== ''){
				const item = {}
				item.ValueStr = this.specName
				this.pageData.ProductAttributesList[this.addIndex].Values.push(item)
				this.specName = ''
			}
		},
		//新增规格
		addSpec(){
			const item = {}
			item.AttributeName = ''
			item.Values = []
			
			this.pageData.ProductAttributesList.push(item)
		},
    // 修改规格
    changeSpec() {    
      this.showSpec = true
      this.$forceUpdate()
    },
    // 新增规格项
    addSpecItem(index) {
			const list = this.pageData.ProductAttributesList
			const _item = { ValueStr:''}
			list[index].Values.push(_item)
      this.$forceUpdate()
    },
    // 删除规格项
    deleteSpecItem(index,indexs) {
			if(this.pageData.ProductAttributesList[index].Values.length === 1){
				this.$toast('请至少保留一个规格')
        return
			}
			this.pageData.ProductAttributesList[index].Values.splice(indexs, 1)
      this.$forceUpdate()
    },

		//删除弹窗
		showDeldeteSpec(index){
			this.showDeldeteSpecDialog = true
			this.addIndex = index
		},
    // 删除规格
    deleteSpec() {
			this.pageData.ProductAttributesList.splice(this.addIndex, 1)
			this.productSkuList = []
      this.$forceUpdate()
			this.showDeldeteSpecDialog = false
    },

    // 关闭规格修改弹窗
    closeSpec() {
			this.showSpec = false
    },
		//保存规格
		saveSpec(){
			this.$refs.skuForm.validate().then(() => {
        this.showSpec = false
      })
		},
    // 拖拽结束
    end() {
      this.pageData.logo = this.pageData.imgList[0]
    },

    // 删除图片
    deleteImg(index) {
      this.pageData.imgList.splice(index, 1)
      if (this.pageData.imgList && this.pageData.imgList.length > 0) {
        this.pageData.logo = this.pageData.imgList[0]
      } else {
        this.pageData.logo = ''
      }
    },
    // 添加图片回调
    afterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          this.pageData.imgList.push(res.Data.FullPath)
          this.pageData.logo = this.pageData.logo || this.pageData.imgList[0]
        })
      }
    },
		// 切换是否促销
		toggleSale() {
      this.productDetail.IsSale = (this.productDetail.IsSale === 0 || this.productDetail.IsSale === undefined) ? 1 : 0
      this.$forceUpdate()
    },
		// 切换是否必买
		toggleMust() {
      this.productDetail.IsMustBuy = (this.productDetail.IsMustBuy === 0 || this.productDetail.IsMustBuy === undefined) ? 1 : 0
      this.$forceUpdate()
    },
    // 切换是否推荐
    toggle() {
      this.productDetail.IsRecommend = (this.productDetail.IsRecommend === 0 || this.productDetail.IsRecommend === undefined) ? 1 : 0
      this.$forceUpdate()
    },
    onBlur() {
      console.log('失焦')
      this.$forceUpdate()
    },
    // 上/下架
    updateStatu() {
      this.productDetail.ProductStatus = this.productDetail.ProductStatus === 1 ? 2 : 1
      console.log(this.productDetail.ProductStatus)
      this.EditStoreProduct()
    },
    // 保存
    save() {
			this.productDetail.ProductAttributesList = this.pageData.ProductAttributesList
			console.log(this.productSkuList,"分类id")
			if(this.productSkuList.length > 0){
				this.productSkuList.forEach((ele) => {
					if(ele.SalePrice === '' || ele.Stock === ''){
						this.$toast('请完善规格的价格和库存')
						return
					}
				})
			}
			this.productDetail.ProductSkuList = this.productSkuList
      this.$refs.detailForm.validate().then(() => {
				if(this.productDetail.ProductCategoryId === undefined){
					this.$toast.fail('请选择分类')
          return
				}
				if (this.pageData.imgList.length <= 0) {
          this.$toast.fail('请将信息填写完整')
          return
        } 
        this.EditStoreProduct()
      })
    },

    // 获取门店商品分类列表
    GetStoreProductCategoryList() {
      GetStoreProductCategoryList().then(res => {
        if (res) {
          this.classifyList = res.Data				
          if (this.productDetail.ProductCategoryId) {
            const _id = this.productDetail.ProductCategoryId
            this.classifyList.forEach((item, index) => {
              if (item.ID === _id) {
                this.activeIndex = index  //单选
								//this.selected.push(item);//多选  选中添加到数组里
              }
            })
          }
        }
      })
    },

    // 获取门店商品详情
    GetStoreProductDetail(id) {
      GetStoreProductDetail({ ID: id }).then(res => {
        if (res) {
          this.productDetail = res.Data
          if (res.Data.ImageUrl) {
            this.pageData.imgList = res.Data.ImageUrl.split(',')
            if (this.pageData.imgList.length > 0) {
              this.pageData.logo = this.pageData.imgList[0]
            }
          }
          if (res.Data.ProductSkuList && res.Data.ProductSkuList.length > 0) {
            this.pageData.sku = res.Data.ProductSkuList[0].Sku
          }
          this.GetStoreProductCategoryList()
        }
      })
    },
    // 增改门店商品
    EditStoreProduct() {
      const _sku = this.pageData.sku
      const _imgList = this.pageData.imgList

      // 修改参数ProductSkuList
      if (this.productDetail.ProductSkuList && this.productDetail.ProductSkuList.length > 0) {
        if (_sku) {
          this.productDetail.ProductSkuList.forEach(item => {
            item.Sku = _sku
          })
        } else {
          this.productDetail.ProductSkuList[0].Stock = this.productDetail.Stock
          this.productDetail.ProductSkuList[0].SkuPrice = this.productDetail.ProductPrice
        }
      } else {
        const ProductSkuItem = {}
        ProductSkuItem.ID = 0
        ProductSkuItem.Stock = this.productDetail.Stock
        ProductSkuItem.SkuPrice = this.productDetail.ProductPrice
        this.productDetail.ProductSkuList = [ProductSkuItem]
      }

      // 修改参数ImageUrl
      if (_imgList.length > 0) {
        let _imgUrl = ''
        for (let i = 0; i < _imgList.length; i++) {
          if (i === _imgList.length - 1) {
            _imgUrl += _imgList[i]
          } else {
            _imgUrl = _imgUrl + _imgList[i] + ','
          }
        }
        this.productDetail.ImageUrl = _imgUrl
      }

      EditStoreProduct(this.productDetail).then(res => {
        if (res) {
          if (res.Data) {
            this.$toast.success('成功')
            this.$utils.back(this.$route.path)
          } else {
            this.$toast.fail(res.Msg || '失败')
          }
        }
      })
    },
    // 删除门店商品
    DeleteStoreProduct(id) {
      DeleteStoreProduct({ IDS: id }).then(res => {
        if (res) {
          this.$toast.success('删除成功')
          this.$utils.back(this.$route.path)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon,/deep/.van-nav-bar__title,/deep/.van-nav-bar__text{
    color: #fff !important;
  }
}
/deep/.van-hairline--bottom::after{
  border:none;
}
.bg-box{
  position: absolute;
  width: 100%;
  height: 250px;
  border-radius: 0 0 30% 30%;
  z-index: -1;
}
.prductItem-detail{
  padding-bottom: 80px;
  position: relative;
  .van-cell{
    padding-left: 7.5px;
    font-size: 12px;
    background: #f7f7f7;
  }
}
.product-price-box,.product-stock{
  .van-cell{
    padding-left:7.5px;
    line-height: 1.5;
    font-size: 12px;
    background: #f7f7f7;
  }
  .flex-item{
    width:calc(50% - 12px);
  }
}
.product-stock{
  .van-cell{
    /deep/.van-field__label{
      width: auto;
    }
    /deep/.van-cell__value{
      .van-field__control{
      text-align: left;
      }
    }
  }
}
.product-sku-list{
  .van-cell{
    padding: 11px 7px;
    /deep/.van-cell__value{
      font-size: 12px;
      line-height: 1;
    }
  }

}
.item-tle{
  font-weight: 500;
  font-size: 28px;
  color: #000;
  position: relative;
}
.left-star{
  padding-left: 15px;
  &::before{
    content: "*";
    color: #FF0202;
    position: absolute;
    font-size: 28px;
    top: 5px;
    left: 0;
  }
}
.classifyList{
  width: 100%;
  flex-wrap: wrap;
  .classifyItem{
    width: calc(25% - 18px);
    text-align: center;
    line-height: 3;
    height: 72px;
    background: #F4F4F4;
    color:$color6;
    margin-bottom: 24px;
    margin-right: 24px;
    border-radius: 6px;
    &:nth-child(4n){
      margin-right: 0;
    }
  }
  .activeClassify{
   @include bg-primary;
   color:$colorF;
  }
  .openClassifyList{
    background: #fff;
    height: 72px;
    border:1px dashed$color6;
    line-height: 70px;
    p{
      padding-left: 30px;
      display: inline-block;
      position: relative;
      .add{
        position: absolute;
        left: 0;
        top: 19px;
      }
    }
  }
}
.arrow{
  font-weight: 500;
  font-size: 24px;
  height: 100%;
  line-height: 56px;
  display: inline-block;
  padding-right: 30px;
  position: absolute;
  right: 0;
  &:after{
    right: 0;
    top: 20px;
  }
}
.left-line{
  padding-left: 20px;
  position: relative;
  line-height: 1;
  &::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 4px;
    @include bg-primary;
    left: 0;
    top: 0;
  }
}
.productImgItem{
  display: inline-block;
  position: relative;
  height: 136px;
  width: 136px;
  margin-right: 34px;
  margin-bottom: 24px;
  &:nth-child(4n+4){
    margin-right: 0;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .img-close-box{
    position: absolute;
    padding: 10px;
    top: -20px;
    right: -20px;
    line-height: 1;
    .img-close{
      position: relative;
      display: inline-block;
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background: $black;
      &::before,&::after{
        content: '';
        position: absolute;
        width: 2px;
        height: 15px;
        transform: rotate(45deg);
        background: $colorF;
        top: 5px;
        left: 11px;
      }
      &::after{
        transform: rotate(-45deg);
      }
    }
  }
}
.add-img{
  border: 1px solid$colorC;
  &:before,&:after{
    content: '';
    position: absolute;
    height: 56px;
    width: 4px;
    top: 40px;
    left: 66px;
    background:$colorC;
  }
  &:after{
    height: 4px;
    width: 56px;
    top: 66px;
    left: 40px;
  }
  /deep/.van-uploader{
    height: 100%;
    width: 100%;
    margin: 0;
    .van-uploader__wrapper{
      height: 100%;
      width: 100%;
      margin: 0;
      .van-uploader__upload{
        height: 100%;
        width: 100%;
        margin: 0;
        background: transparent;
        .van-icon{
          display: none;
        }
      }
    }
  }
}
.textarea-box{
  /deep/.van-cell{
    background: $colorF7;
    border-radius: 6px;
    font-size: 12px;
  }
  /deep/.van-field__word-limit{
    color:$color9;
  }
}
.checkbox{
  position: relative;
  &:before{
    content:'';
    display: inline-block;
    position: absolute;
    width:32px;
    height: 32px;
    border: 1px solid $colorC;
    border-radius: 50%;
    right: 0;
  }
}
.checked{
  &:before{
    @include bg-primary();
    @include border-primary();
  }
  &:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: transparent $colorF $colorF transparent;
    right: 12px;
    top: 5px;
  }
}
.btn-box{
  margin: 0 50px;
  height: 100%;
}

.input{
  width: 100%;
  border-radius: 12px;
  padding: 0 150px 0 20px;
  background: $colorF7;
  line-height: 80px;
}
.btn{
  line-height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include bg-primary();
  color:$colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-active{
  line-height: 76px;
  box-sizing: border-box;
  height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include color-primary();
  border: 1px solid currentColor;
  background: $colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.pop-classify-litem{
  &:not(:last-child){
    border-bottom: 1px solid #e6e6e6;
  }
  p{
    font-size: 26px;
    line-height: 98px;
  }
}
.dialog{
  /deep/.van-dialog__confirm, .van-dialog__confirm:active{
    @include color-primary();
  }
  .input-1{
    line-height: 3;
    padding: 0 20px;
    background: $colorF7;
    border-radius: 12px;
  }
  .dialog-btn{
    background: $colorF;
    &:active{
      background: $colorF7;
    }
  }
}
.specdelete img{
	width: 40px;
	height: 40px;
}
.specs{
	display: flex;
	align-items: center;
	/deep/.van-field__label{
		width: auto;
		font-size: 16px;
		color: #333;
	}
}
.specList{
	display: flex;
	flex-wrap: wrap;
}
.spec{
	position: relative;
	.delete{
		position: absolute;
		top: -15px;
		right: 20px;
	}
}
.specValue{
	padding: 0 20px;
	height: 56px;
	line-height: 56px;
	background: rgba(22,173,86,0.1);
	border-radius: 4px;
	text-align: center;
	color: $primary;
	font-size: 28px;
	margin-right: 30px;
}
.addSpecValue{
	padding: 0 20px;
	height: 56px;
	line-height: 56px;
	background: #EFEFEF;
	border-radius: 4px;
	color: #666;
}
.addSpec{
	background: #fff;
	font-size: 28px;
	padding: 30px;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-f5{
	background: #f5f5f5;
	padding: 24px;
	.mr-76{
		margin-right: 76px;
	}
	/deep/.van-cell{
		padding: 6px 12px;
	}
}
.savePrice{
	width: 690px;
	height: 90px;
	line-height: 90px;
	border-radius: 45px;
	font-size: 32px;
}
.nav_bottom{
	position: sticky;
	bottom: 0;
	background: #fff;
	text-align: center;
	padding: 14px;
}
.w-110{
	width: 110px;
	margin-right: 10px;
}
</style>
